<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>商户信息</span>
          </div>
          <div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" /> 用户名称
                <div class="pull-right">{{form.shopVerification.director}}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" /> 手机号码
                <div class="pull-right">{{form.shopVerification.mobile}}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email" /> 身份证号
                <div class="pull-right">{{form.shopVerification.idCard}}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>店铺资料</span>
          </div>
          <div>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="店名" prop="name">
                    <el-input v-model="form.name" readonly style="width: 300px;" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="注册时间" prop="regTime">
                    <!-- <el-date-picker clearable v-model="form.regTime" type="date" value-format="yyyy-MM-dd" readonly
                      style="width: 300px;">
                    </el-date-picker> -->
                    <el-input v-model="form.regTime" readonly style="width: 300px;" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="经营区域" prop="operatingArea">
                    <el-input v-model="form.operatingArea" readonly style="width: 300px;" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="详细地址" prop="address">
                    <el-input v-model="form.address" readonly style="width: 300px;" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="营业营业时间" prop="startTime">
                    <el-input v-model="form.startTime" readonly style="width: 300px;" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="停止营业时间" prop="endTime">
                    <el-input v-model="form.endTime" readonly style="width: 300px;" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="商家介绍" prop="description">
                    <el-input v-model="form.description" readonly style="width: 300px;" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商家评分" prop="rate">
                    <el-input v-model="form.rate" readonly style="width: 300px;" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="负责人" prop="director">
                    <el-input v-model="form.shopVerification.director" readonly style="width: 300px;" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="营业执照号码" prop="businessLicenseId">
                    <el-input v-model="form.shopVerification.businessLicenseId" readonly style="width: 300px;" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="门店照片" prop="photo">
                <image-preview :src="form.photo" :width="100" :height="100" />
              </el-form-item>
              <el-form-item label="营业执照图片" prop="businessLicenseImg">
                <image-preview :src="form.shopVerification.businessLicenseImg" :width="100" :height="100" />
              </el-form-item>
              <!-- <el-form-item label="详情照片" prop="photo">
                <div v-for="(index,item) in form.shopImgsList" :key="index">
                  <image-preview :src="item.img" :width="100" :height="100" />
                </div>
              </el-form-item> -->
              <el-form-item label="经营状态" prop="status">
                <dict-tag :options="dict.type.status" :value="form.status" />
              </el-form-item>
              <el-form-item label="审核状态" prop="auditStatusId">
                <dict-tag :options="dict.type.audit_status" :value="form.auditStatusId" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="handleCheck"
                style="position: absolute; right: 80px; bottom: 45px; width: 100px; height: 50px;">审核</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 修改店铺审核状态对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="formCheck" :model="formCheck" :rules="rules" label-width="80px">
        <el-form-item label="审核状态" prop="auditStatusId">
          <el-select v-model="formCheck.auditStatusId" placeholder="请选择审核状态">
            <el-option v-for="dict in dict.type.audit_status" :key="dict.value" :label="dict.label"
              :value="parseInt(dict.value)"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listShop,
    getShop,
    delShop,
    addShop,
    updateShop
  } from "@/api/merchant/shop";

  export default {
    name: "Shop",
    dicts: ['status', 'audit_status'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        // 审核状态表单
        formCheck: {},
        // 表单校验
        rules: {},
        id: null
      };
    },
    mounted() {},
    // 进入页面调用
    beforeRouteEnter(to, from, next) {
      next(
        (vm) => {
          vm.id = to.query.id;
          vm.handleUpdate(vm.id);
        }
      );
    },
    methods: {
      // 取消按钮
      cancel() {
        this.open = false;
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          name: null,
          operatingArea: null,
          regTime: null,
          startTime: null,
          endTime: null,
          address: null,
          longitude: null,
          latitude: null,
          description: null,
          photo: null,
          rate: null,
          status: null,
          auditStatusId: null,
          deleted: null,
          updateTime: null
        };
        this.resetForm("form");
      },
      /** 查询显示操作 */
      handleUpdate(id) {
        this.reset();
        getShop(id).then(response => {
          this.form = response.data;
          // this.open = true;
          // this.title = "修改店铺信息管理";
        });
      },
      // 审核按钮操作
      handleCheck() {
        this.open = true;
        this.formCheck = {
          id: null,
          auditStatusId: null
        };
        this.formCheck.id = this.form.id;
        this.formCheck.auditStatusId = this.form.auditStatusId;
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["formCheck"].validate(valid => {
          if (valid) {
            updateShop(this.formCheck).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.handleUpdate(this.id);
            });
          }
        });
      }
    }
  };
</script>
